import { h5AccountDelete, h5AccountEnabled, h5AccountList, h5AccountParams } from '@/apis/company/h5'
import { BaseData, BaseMethod } from '@/utils/basc-data'
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive } from 'vue'
import * as tableConfig from './config.json'

export class H5User extends BaseData implements BaseMethod {
    //搜索数据
    searchData = reactive({
        name: '',
        phone: '',
        status: '2'
    })
    //详情弹窗数据
    detailedDialogData = reactive({
        visible: false,
        title: 'this is a dialog',
        company: '',
        companyId: '',
        userId: '',
        name: '',
        phone: '',
        password: '',
        status: '',
        type: ''
    })
    headerOperation = tableConfig.headerOperation
    constructor() {
        super(tableConfig)

        this.getData()
    }
    /**
     * 拉取数据
     */
    getData = () => {
        const obj: h5AccountParams = {
            current: this.pageData.pagination.pageNo,
            size: this.pageData.pagination.pageSize,
            companyName: this.uStore.isSuperAdmin ? '' : this.uStore.company
        }

        if (this.searchData.name) {
            obj.companyName = this.searchData.name
        }
        if (this.searchData.phone) {
            obj.userPhone = this.searchData.phone
        }
        if (Number(this.searchData.status) !== 2) {
            obj.userEnabledStatus = this.searchData.status
        }

        h5AccountList(obj).then(res => {
            if (res.data.value === 200) {
                this.pageData.table.data.length = 0
                this.pageData.pagination.total = res.data.data.total
                res.data.data.records.forEach((item: any) => {
                    item.status = item.userEnabledStatus
                    this.pageData.table.data.push(item)
                })
            }
        })
    }
    /**
     * 监听搜索
     */
    onSearch = (res: any) => {
        this.searchData.name = res.custom.companyName
        this.searchData.phone = res.phone
        this.searchData.status = res.status

        this.getData()
    }
    /**
     * 监听点击重置按钮
     */
    onReset = () => {
        this.searchData.name = ''
        this.searchData.phone = ''
        this.searchData.status = '2'
        this.pageData.pagination.pageNo = 1
        this.getData()
    }
    /**
     * 监听分页发生改变
     */
    onPaginationChange = (index: number) => {
        this.pageData.pagination.pageNo = index
        this.getData()
    }
    /**
     * 监听选择每页显示个数
     */
    onPaginationSize = (size: number) => {
        this.pageData.pagination.pageNo = 1
        this.pageData.pagination.pageSize = size
        this.getData()
    }

    /**
     *
     * @param type edit 修改 delete 删除 create 新增
     * @param index
     */
    isClick = false
    onOperation = (result: any) => {
        const { type, data } = result
        console.log(data)

        this.detailedDialogData.type = type

        if (type === 'create') {
            console.log('create')
            this.detailedDialogData.visible = true
            this.detailedDialogData.company = this.uStore.company
            this.detailedDialogData.companyId = this.uStore.companyId
            this.detailedDialogData.name = ''
            this.detailedDialogData.phone = ''
            this.detailedDialogData.password = ''
            this.detailedDialogData.status = ''
            this.detailedDialogData.title = '新增账号'
        } else if (type === 'edit') {
            this.detailedDialogData.visible = true
            this.detailedDialogData.title = '账号编辑'
            this.detailedDialogData.company = data.companyName
            this.detailedDialogData.companyId = data.companyId
            this.detailedDialogData.name = data.userName
            this.detailedDialogData.phone = data.userPhone
            this.detailedDialogData.password = data.password
            this.detailedDialogData.status = data.status
            this.detailedDialogData.userId = data.userId
            console.log('this.detailedDialogData', this.detailedDialogData)
        } else if (type === 'delete') {
            ElMessageBox.confirm(`确定要删除【${data.userName}】账号吗？`, '删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            })
                .then(() => {
                    this.isClick = false
                    h5AccountDelete(data.userId).then(res => {
                        if (res.data.value === 200) {
                            ElMessage.success('账号删除成功！')
                            this.getData()
                        } else {
                            ElMessage.error(res.data.desc)
                        }
                    })
                })
                .catch(() => {
                    this.isClick = false
                })
        } else if (type === 'switch') {
            h5AccountEnabled(data.userId, data.status).then(res => {
                if (res.data.value === 200) {
                    ElMessage.success(data.status ? '账号启用成功！' : '账号禁用成功')
                    this.getData()
                } else {
                    ElMessage.error(res.data.desc)
                }
            })
        }
    }
    /**
     * 监听弹窗关闭
     */
    onEditClose = () => {
        this.isClick = false
        this.detailedDialogData.visible = false
        this.getData()
    }

    onH5AccountStatus = (id: string, status: boolean) => {
        console.log(id, status)
        h5AccountEnabled(id, status).then(res => {
            if (res.data.value === 200) {
                ElMessage.success(status ? '账号启用成功！' : '账号禁用成功')
                this.getData()
            } else {
                ElMessage.error(res.data.desc)
            }
        })
    }
}
